<!doctype html>
<html>
    <head>
        <title>HT for Web 表单手册</title>
        <meta charset="UTF-8">    
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css"> 
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white; 
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {	
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;	
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }                        
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;                
            }            
            .logo{
                vertical-align: middle;
            }

        </style>        
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }
                
                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];
                    
                    // a small hack to make it work on android
                    iframe.ontouchstart = func;
                    
                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }   
            }
        </script>    
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT for Web 表单手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#ref_overview">概述</a> </li><li><a href="#ref_formpane">表单面板</a><ul><li><a href="#ref_func">属性函数</a></li><li><a href="#ref_layout">布局参数</a></li><li><a href="#ref_element">组件元素</a></li></ul></li><li><a href="#ref_button">按钮</a></li><li><a href="#ref_radioButton">单选按钮</a></li><li><a href="#ref_checkBox">复选框</a></li><li><a href="#ref_textField">文本框</a></li><li><a href="#ref_textArea">文本区</a></li><li><a href="#ref_image">图片</a></li><li><a href="#ref_slider">滑动条</a></li><li><a href="#ref_combobox">组合框</a></li><li><a href="#ref_multicombobox">模板组合框</a></li><li><a href="#ref_colorpicker">颜色选择框</a></li></ul>

<hr/>

<div id="ref_overview"></div>

<h2>概述</h2>

<p><code>HT for Web</code>提供了表单插件，其包含了下拉菜单、滑动条和按钮等组件，及具有组件布局功能的表单面板。
<code>html</code>也提供了部分类似的组件，但不同浏览器平台的呈现甚至交互效果都有很多差异，且有些组件风格无法自定义，
<code>HT</code>提供的这些组件为了就是统一各个平台的差异，提供一致的风格和交互方式，并支持丰富的自定义扩展功能。</p>

<p>使用表单插件需要在引入<code>ht.js</code>核心库之后，再引入一个<code>ht-form.js</code>的表单插件库。</p>

<div id="ref_formpane"></div>

<h2>表单面板</h2>

<p><code>HT for Web</code>提供了表单面板组件，该组件具备布局组件功能，添加到表单面板的组件可为普通的<code>html</code>元素，
也可为<code>HT</code>内置的任意视图组件。表单面板组件以添加行的模式设计，每行添加任意定义组件，通过指定每个组件的宽度信息，
以及每行的行高信息，来达到整体所有组件的布局，对于更复杂的界面可通过嵌套表单面板来实现。</p>

<p><iframe src="examples/example_easing.html" style="height:400px"></iframe> </p>

<p><iframe src="examples/example_unboxing.html" style="height:400px"></iframe> </p>

<div id="ref_func"></div>

<h3>属性函数</h3>

<p><code>ht.widget.FormPane</code>为表单面板组件类，其主要可配置属性和函数如下：</p>

<ul><li><code>vPadding</code>属性通过<code>getVPadding</code>和<code>setVPadding</code>获取和设置表单顶部和顶部与组件内容的间距，默认值为<code>8</code></li><li><code>hPadding</code>属性通过<code>getHPadding</code>和<code>setHPadding</code>获取和设置表单左边和右边与组件内容的间距，默认值为<code>8</code></li><li><code>vGap</code>属性通过<code>getVGap</code>和<code>setVGap</code>获取和设置表单组件水平间距，默认值为<code>6</code></li><li><code>hGap</code>属性通过<code>getHGap</code>和<code>setHGap</code>获取和设置表单的行垂直间距，默认值为<code>6</code></li><li><code>rowHeight</code>属性通过<code>getRowHeight</code>和<code>setRowHeight</code>获取和设置默认行高</li><li><code>labelVPadding</code>属性通过<code>getLabelVPadding</code>和<code>setLabelVPadding</code>获取和设置文字顶部和顶部的间距，默认值为<code>0</code></li><li><code>labelHPadding</code>属性通过<code>getLabelHPadding</code>和<code>setLabelHPadding</code>获取和设置文字左边和右边的间距，默认值为<code>2</code></li><li><code>scrollBarColor</code>属性通过<code>getScrollBarColor</code>和<code>setScrollBarColor</code>获取和设置滚动条颜色</li><li><code>scrollBarSize</code>属性通过<code>getScrollBarSize</code>和<code>setScrollBarSize</code>获取和设置滚动条宽度</li><li><code>autoHideScrollBar</code>属性通过<code>isAutoHideScrollBar</code>和<code>setAutoHideScrollBar</code>获取和设置是否自动隐藏滚动条，默认为<code>true</code></li><li><code>addRow(items, widths, height, params)</code>添加一行组件<ul><li><code>items</code>为元素数组，元素可为字符串、<code>json</code>格式描述的组件参数信息、<code>html</code>元素或者为<code>null</code>的空</li><li><code>widths</code>为每个元素宽度信息数组，宽度值大于<code>1</code>代表固定绝对值，小于等于<code>1</code>代表相对值，也可为<code>80+0.3</code>的组合</li><li><code>height</code>为行高信息，值大于<code>1</code>代表固定绝对值，小于等于<code>1</code>代表相对值，也可为<code>80+0.3</code>的组合，为空时采用默认行高</li><li><code>params</code>为<code>json</code>格式的额外参数，例如插入行索引以及行边框或背景颜色等，如<code>{index: 2, background: &#39;yellow&#39;, borderColor: &#39;red&#39;}</code></li></ul></li><li><code>removeRow(index)</code>删除指定的行</li><li><code>clear()</code>清除所有行信息 </li><li><code>getItemById(id)</code>根据<code>id</code>值找到对应的<code>item</code>元素</li><li><code>getValue(id)</code>根据<code>id</code>获取对应<code>item</code>元素值，简写函数为<code>v(id)</code></li><li><code>setValue(id, value)</code>根据<code>id</code>设置对应<code>item</code>元素值，简写函数为<code>v(id, value)</code></li><li><code>v(jsonObj)</code>可批量将<code>jsonObj</code>的所有<code>key</code>和<code>value</code>对，作为<code>id</code>和<code>value</code>设置到对应的<code>item</code>元素中</li></ul>

<div id="ref_layout"></div>

<h3>布局参数</h3>

<p>绝对值与相对值：</p>

<ul><li>绝对值代表宽度或高度为固定值，<code>HT</code>系统对大于<code>1</code>的值认定为绝对值</li><li>相对值为小于或等号<code>1</code>的值表示，其真实分配值为总宽度或总高度扣除所有绝对值后的再分配</li><li>绝对值与相对值的组合，代表最小宽度或行高为绝对值，当有扣除绝对值后还有空间时，再按相对值增大分配</li></ul>

<p>例如<code>[80, 0.1, 60, 0.2, &#39;20+0.3&#39;]</code>代表：</p>

<ul><li>第一列为固定值<code>80</code></li><li>第二列为<code>Math.max(0, (0.1/(0.1+0.2+0.3))*(width-80-60-20))</code></li><li>第三列为固定值<code>60</code></li><li>第四列为<code>Math.max(0, (0.2/(0.1+0.2+0.3))*(width-80-60-20))</code></li><li>第五列为<code>20 + Math.max(0, (0.3/(0.1+0.2+0.3))*(width-80-60-20))</code></li></ul>

<div id="ref_element"></div>

<h3>组件元素</h3>

<p>组件元素有三种类型：</p>

<ul><li><code>HTML</code>原生元素，可直接设置原生元素对象，或采用<code>json</code>方式设置到<code>element</code>属性</li><li><code>FormPane</code>内部自绘制的文本信息，可直接设置字符串，或采用<code>json</code>方式设置到<code>element</code>属性</li><li><code>HT</code>自带组件如<code>Button</code>、<code>CheckBox</code>和<code>ComboBox</code>等，可直接设置组件对象，或采用<code>json</code>方式设置到<code>element</code>属性</li></ul>

<p>原生对象的添加方式可参考<a href="examples/example_easing.html">Easing实例</a>中的控制面板下端的<code>www.hightopo.com</code>超链接</p>

<pre><code>var href = document.createElement(&#39;a&#39;);
href.setAttribute(&#39;href&#39;, &#39;http://www.hightopo.com&#39;);     
href.innerHTML = &#39;http://www.hightopo.com&#39;;            
href.style.font = formPane.getLabelFont();            
href.style.lineHeight = formPane.getRowHeight() + &#39;px&#39;;
href.style.textAlign = &#39;right&#39;;
formPane.addRow([href], [0.1]);</code></pre>

<p>对于添加的元素，如果为<code>string</code>字符串，则显示为标签文字，如果需要定义文字的其他参数，则可使用<code>json</code>格式</p>

<pre><code>{
    element: &#39;Hightopo&#39;, // 文字内容
    color: &#39;red&#39; //文字颜色
    font: &#39;bold 24px arial&#39;, // 文字字体
    align: &#39;left&#39;, // 文字水平对齐，可选值: left|center|right
    vAlign: &#39;top&#39;, // 文字垂直对齐，可选值: top|middle|bottom
}</code></pre>

<p>元素的<code>json</code>格式支持以下几个预定义属性：</p>

<ul><li><code>id</code>唯一标示属性，可通过<code>formPane.getItemById(id)</code>获取添加到对应的<code>item</code>对象</li><li><code>borderColor</code>边框颜色，设置了该属性后元素会呈现该颜色的矩形边框</li><li><code>background</code>背景颜色，设置了该属性后元素会呈现该颜色的矩形背景</li></ul>

<p>以下预定义属性，将会在<code>element</code>属性未定义的情况下，自动根据<code>json</code>信息构建出视图组件，并存放到元素的<code>element</code>属性上，
这种通过<code>json</code>信息自动构建<code>element</code>视图组件的方式也同样适用于<code>ht.widget.Toolbar</code>的元素定义：</p>

<ul><li><code>textField</code>文本输入框，设置了该属性后<code>HT</code>将根据属性值自动构建<code>ht.widget.TextField</code>对象，并保存在<code>element</code>属性上</li><li><code>textArea</code>文本输入框，设置了该属性后<code>HT</code>将根据属性值自动构建<code>ht.widget.TextArea</code>对象，并保存在<code>element</code>属性上</li><li><code>button</code>文本输入框，设置了该属性后<code>HT</code>将根据属性值自动构建<code>ht.widget.Button</code>对象，并保存在<code>element</code>属性上</li><li><code>checkBox</code>文本输入框，设置了该属性后<code>HT</code>将根据属性值自动构建<code>ht.widget.CheckBox</code>对象，并保存在<code>element</code>属性上</li><li><code>image</code>文本输入框，设置了该属性后<code>HT</code>将根据属性值自动构建<code>ht.widget.Image</code>对象，并保存在<code>element</code>属性上</li><li><code>comboBox</code>文本输入框，设置了该属性后<code>HT</code>将根据属性值自动构建<code>ht.widget.ComboBox</code>对象，并保存在<code>element</code>属性上</li><li><code>slider</code>文本输入框，设置了该属性后<code>HT</code>将根据属性值自动构建<code>ht.widget.Slider</code>对象，并保存在<code>element</code>属性上</li></ul>

<p>示例：</p>

<pre><code>{
    id: &#39;679&#39;,
    button: {
        label: &#39;图扑软件好公司&#39;,
        icon: &#39;ht_logo&#39;,
        toolTip: &#39;eric@hightopo.com&#39;,            
        onClicked: function(){
            console.log(&#39;button is clicked.&#39;);
        }
    }
}</code></pre>

<p>上例<code>json</code>格式定义了一个<code>id</code>为<code>679</code>的元素，<code>HT</code>会自动构建一个<code>ht.widget.Button</code>的<code>button</code>对象，
并通过<code>button.setLabel(&#39;图扑软件好公司&#39;)</code>，<code>button.setIcon(&#39;ht_logo&#39;)</code>、<code>button.setToolTip(&#39;eric@hightopo.com&#39;)</code>
和<code>button.onClicked = function(){console.log(&#39;button is clicked.&#39;);}</code>这几步设置初始化该<code>button</code>对象，
然后对<code>json</code>格式新增加一个<code>element</code>属性，其值为该<code>button</code>对象。</p>

<p><iframe src="examples/example_formpane.html" style="height:650px"></iframe></p>

<div id="ref_button"></div>

<h2>按钮</h2>

<p><code>ht.widget.Button</code>为按钮类，其主要可配置属性和函数如下：</p>

<ul><li><code>label</code>属性通过<code>getLabel</code>和<code>setLabel</code>获取和设置文字标签</li><li><code>labelFont</code>属性通过<code>getLabelFont</code>和<code>setLabelFont</code>获取和设置文字字体</li><li><code>labelColor</code>属性通过<code>getLabelColor</code>和<code>setLabelColor</code>获取和设置文字颜色</li><li><code>labelSelectColor</code>属性通过<code>getLabelSelectColor</code>和<code>setLabelSelectColor</code>获取和设置文字选中颜色</li><li><code>borderColor</code>属性通过<code>getBorderColor</code>和<code>setBorderColor</code>获取和设置边框颜色</li><li><code>background</code>属性通过<code>getBackground</code>和<code>setBackground</code>获取和设置背景颜色</li><li><code>selectBackground</code>属性通过<code>getSelectBackground</code>和<code>setSelectBackground</code>获取和设置背景颜色</li><li><code>icon</code>属性通过<code>getIcon</code>和<code>setIcon</code>获取和设置图标</li><li><code>iconColor</code>属性通过<code>getIconColor</code>和<code>setIconColor</code>获取和设置图标颜色</li><li><code>disabled</code>属性通过<code>isDisabled</code>和<code>setDisabled</code>获取和设置是否使能功能，默认值为<code>false</code></li><li><code>toolTip</code>属性通过<code>getToolTip</code>和<code>setToolTip</code>获取和设置文字提示，可通过<code>enableToolTip()</code>和<code>disableToolTip()</code>启动和关闭文字提示</li><li><code>orientation</code>属性通过<code>getOrientation</code>和<code>setOrientation</code>获取和设置文字和图标的排列方式，
可设置<code>horizontal</code>和<code>vertical</code>的水平和垂直方式，也可采用<code>h</code>和<code>v</code>的简写方式</li><li><code>selected</code>属性通过<code>isSelected</code>和<code>setSelected</code>获取和设置按钮是否处于选中状态</li><li><code>pressed</code>属性通过<code>isPressed</code>和<code>setPressed</code>获取和设置按钮是否处于按下状态</li><li><code>clickable</code>属性通过<code>isClickable</code>和<code>setClickable</code>获取和设置按钮是否处于可按状态</li><li><code>togglable</code>属性通过<code>isTogglable</code>和<code>setTogglable</code>获取和设置按钮是否处于开关状态</li><li><code>groupId</code>属性通过<code>getGroupId</code>和<code>setGroupId</code>获取和设置组编号，属于同组的<code>togglable</code>按钮具有互斥功能</li></ul>

<p><iframe src="examples/example_button.html" style="height:500px"></iframe>  </p>

<div id="ref_radioButton"></div>

<h2>单选按钮</h2>

<p><code>ht.widget.RadioButton</code>为单选按钮类，其主要可配置属性和函数如下：</p>

<ul><li><code>label</code>属性通过<code>getLabel</code>和<code>setLabel</code>获取和设置文字标签</li><li><code>labelFont</code>属性通过<code>getLabelFont</code>和<code>setLabelFont</code>获取和设置文字字体</li><li><code>labelColor</code>属性通过<code>getLabelColor</code>和<code>setLabelColor</code>获取和设置文字颜色</li><li><code>icon</code>属性通过<code>getIcon</code>和<code>setIcon</code>获取和设置图标</li><li><code>iconColor</code>属性通过<code>getIconColor</code>和<code>setIconColor</code>获取和设置图标颜色</li><li><code>disabled</code>属性通过<code>isDisabled</code>和<code>setDisabled</code>获取和设置是否使能功能，默认值为<code>false</code></li><li><code>toolTip</code>属性通过<code>getToolTip</code>和<code>setToolTip</code>获取和设置文字提示，可通过<code>enableToolTip()</code>和<code>disableToolTip()</code>启动和关闭文字提示</li><li><code>selected</code>属性通过<code>isSelected</code>和<code>setSelected</code>获取和设置单选按钮是否处于选中状态</li><li><code>pressed</code>属性通过<code>isPressed</code>和<code>setPressed</code>获取和设置单选按钮是否处于按下状态</li><li><code>pressBackground</code>属性通过<code>getPressBackground</code>和<code>setPressBackground</code>获取和设置按下状态背景颜色</li><li><code>padding</code>属性通过<code>getPadding</code>和<code>setPadding</code>获取和设置间距，默认值为<code>0</code></li><li><code>getRadioIcon</code>函数选中时返回<code>radioOn</code>图标，非选中时返回<code>radioOff</code>图标，可重载自定义</li><li><code>groupId</code>属性通过<code>getGroupId</code>和<code>setGroupId</code>获取和设置组编号，属于同组的<code>togglable</code>单选按钮具有互斥功能</li></ul>

<p><iframe src="examples/example_radiobutton.html" style="height:200px"></iframe> </p>

<div id="ref_checkBox"></div>

<h2>复选框</h2>

<p><code>ht.widget.CheckBox</code>为复选框类，其主要可配置属性和函数如下：</p>

<ul><li><code>label</code>属性通过<code>getLabel</code>和<code>setLabel</code>获取和设置文字标签</li><li><code>labelFont</code>属性通过<code>getLabelFont</code>和<code>setLabelFont</code>获取和设置文字字体</li><li><code>labelColor</code>属性通过<code>getLabelColor</code>和<code>setLabelColor</code>获取和设置文字颜色</li><li><code>icon</code>属性通过<code>getIcon</code>和<code>setIcon</code>获取和设置图标</li><li><code>iconColor</code>属性通过<code>getIconColor</code>和<code>setIconColor</code>获取和设置图标颜色</li><li><code>disabled</code>属性通过<code>isDisabled</code>和<code>setDisabled</code>获取和设置是否使能功能，默认值为<code>false</code></li><li><code>toolTip</code>属性通过<code>getToolTip</code>和<code>setToolTip</code>获取和设置文字提示，可通过<code>enableToolTip()</code>和<code>disableToolTip()</code>启动和关闭文字提示</li><li><code>selected</code>属性通过<code>isSelected</code>和<code>setSelected</code>获取和设置复选框是否处于选中状态</li><li><code>pressed</code>属性通过<code>isPressed</code>和<code>setPressed</code>获取和设置复选框是否处于按下状态</li><li><code>pressBackground</code>属性通过<code>getPressBackground</code>和<code>setPressBackground</code>获取和设置按下状态背景颜色</li><li><code>padding</code>属性通过<code>getPadding</code>和<code>setPadding</code>获取和设置间距，默认值为<code>0</code></li><li><code>getCheckIcon</code>函数选中时返回<code>check</code>图标，非选中时返回<code>uncheck</code>图标，可重载自定义</li></ul>

<p><iframe src="examples/example_checkbox.html" style="height:200px"></iframe> </p>

<div id="ref_textField"></div>

<h2>文本框</h2>

<p><code>ht.widget.TextField</code>为文本框类，其主要可配置属性和函数如下：</p>

<ul><li><code>getElement()</code>函数返回内部的<code>html</code>原生<code>input</code>文本框元素，可对其直接增加监听或修改风格</li><li><code>type</code>属性通过<code>getType()</code>和<code>setType()</code>获取和设置文本框类型，该值设置到原生<code>elemenet</code>的<code>type</code>属性，如<code>number</code>类型只允许输入数字</li><li><code>editable</code>属性通过<code>isEditable</code>和<code>setEditable</code>获取和设置文本框是否允许输入编辑，为<code>boolean</code>类型，默认为<code>true</code></li><li><code>toolTip</code>属性通过<code>getToolTip</code>和<code>setToolTip</code>获取和设置文字提示，可通过<code>enableToolTip()</code>和<code>disableToolTip()</code>启动和关闭文字提示</li><li>文本值可通过<code>getText</code>或<code>getValue</code>获取，<code>setText</code>或<code>setValue</code>进行设置，最终都是操作原生<code>element</code>的<code>value</code>属性值</li><li>文本颜色通过<code>getColor</code>和<code>setColor</code>进行获取和设置，最终都是操作原生<code>element</code>的<code>style.color</code>属性值</li><li>文本字体通过<code>getFont</code>和<code>setFont</code>进行获取和设置，最终都是操作原生<code>element</code>的<code>style.font</code>属性值</li><li>文本背景通过<code>getBackground</code>和<code>setBackground</code>进行获取和设置，最终都是操作原生<code>element</code>的<code>style.background</code>属性值</li></ul>

<div id="ref_textArea"></div>

<h2>文本区</h2>

<p><code>ht.widget.TextArea</code>为文本区类，其主要可配置属性和函数如下：</p>

<ul><li><code>getElement()</code>函数返回内部的<code>html</code>原生<code>input</code>文本区元素，可对其直接增加监听或修改风格</li><li><code>editable</code>属性通过<code>isEditable</code>和<code>setEditable</code>获取和设置文本区是否允许输入编辑，为<code>boolean</code>类型，默认为<code>true</code></li><li><code>toolTip</code>属性通过<code>getToolTip</code>和<code>setToolTip</code>获取和设置文字提示，可通过<code>enableToolTip()</code>和<code>disableToolTip()</code>启动和关闭文字提示</li><li>文本值可通过<code>getText</code>或<code>getValue</code>获取，<code>setText</code>或<code>setValue</code>进行设置，最终都是操作原生<code>element</code>的<code>value</code>属性值</li><li>文本颜色通过<code>getColor</code>和<code>setColor</code>进行获取和设置，最终都是操作原生<code>element</code>的<code>style.color</code>属性值</li><li>文本字体通过<code>getFont</code>和<code>setFont</code>进行获取和设置，最终都是操作原生<code>element</code>的<code>style.font</code>属性值</li><li>文本背景通过<code>getBackground</code>和<code>setBackground</code>进行获取和设置，最终都是操作原生<code>element</code>的<code>style.background</code>属性值</li></ul>

<p><iframe src="examples/example_text.html" style="height:300px"></iframe> </p>

<div id="ref_image"></div>

<h2>图片</h2>

<p><code>ht.widget.Image</code>为图片类，其主要可配置属性和函数如下：</p>

<ul><li><code>borderColor</code>属性通过<code>getBorderColor</code>和<code>setBorderColor</code>获取和设置边框颜色</li><li><code>background</code>属性通过<code>getBackground</code>和<code>setBackground</code>获取和设置背景颜色</li><li><code>icon</code>属性通过<code>getIcon</code>和<code>setIcon</code>获取和设置图标</li><li><code>iconColor</code>属性通过<code>getIconColor</code>和<code>setIconColor</code>获取和设置图标颜色</li><li><code>toolTip</code>属性通过<code>getToolTip</code>和<code>setToolTip</code>获取和设置文字提示，可通过<code>enableToolTip()</code>和<code>disableToolTip()</code>启动和关闭文字提示</li><li><code>stretch</code>属性通过<code>getStretch</code>和<code>setStretch</code>获取和设置图片拉伸方式，默认值为<code>centerUniform</code>，可取值如下：<ul><li><code>fill</code>图片填充满整个矩形区域，如果图片宽高比例和矩形不一致会导致图片拉伸失真</li><li><code>uniform</code>图片始终保持原始宽高比例不变化，并尽量填充满矩形区域</li><li><code>centerUniform</code>当矩形区域大于图片尺寸时图片以原始大小绘制在中心位置，空间不够时采用<code>uniform</code>的绘制方式</li></ul></li></ul>

<p><iframe src="examples/example_image.html" style="height:260px"></iframe> </p>

<div id="ref_slider"></div>

<h2>滑动条</h2>

<p><code>ht.widget.Slider</code>为滑动条类，其主要可配置属性和函数如下：</p>

<ul><li><code>value</code>属性通过<code>getValue</code>和<code>setValue</code>获取和设置当前值，为数字类型，默认值为<code>50</code></li><li><code>min</code>属性通过<code>getMin</code>和<code>setMin</code>获取和设置最小值，为数字类型，默认值为<code>0</code></li><li><code>min</code>属性通过<code>getMax</code>和<code>setMax</code>获取和设置最大值，为数字类型，默认值为<code>100</code></li><li><code>step</code>属性通过<code>getStep</code>和<code>setStep</code>获取和设置步进，为数字类型，默认值为空代表连续</li><li><code>button</code>属性通过<code>getButton</code>和<code>setButton</code>获取和设置滑动条按钮图标</li><li><code>thickness</code>属性通过<code>getThickness</code>和<code>setThickness</code>获取和设置滑动条粗细，为数字类型，默认值为<code>3</code></li><li><code>padding</code>属性通过<code>getPadding</code>和<code>setPadding</code>获取和设置滑动条水平边界间距，为数字类型，默认值为<code>4</code></li><li><code>background</code>属性通过<code>getBackground</code>和<code>setBackground</code>获取和设置滑动条背景颜色，为字符串类型</li><li><code>leftBackground</code>属性通过<code>getLeftBackground</code>和<code>setLeftBackground</code>获取和设置滑动条左侧背景颜色，为字符串类型</li><li><code>disabled</code>属性通过<code>isDisabled</code>和<code>setDisabled</code>获取和设置是否使能功能，默认值为<code>false</code></li><li><code>toolTip</code>属性通过<code>getToolTip</code>和<code>setToolTip</code>获取和设置文字提示，可通过<code>enableToolTip()</code>和<code>disableToolTip()</code>启动和关闭文字提示</li><li><code>instant</code>属性通过<code>isInstant</code>和<code>setInstant</code>获取和设置是否处于即时状态，默认为<code>true</code>，代表作为表格和属性页的编辑器时，将实时改变模型值</li></ul>

<p><iframe src="examples/example_slider.html" style="height:300px"></iframe>    </p>

<div id="ref_combobox"></div>

<h2>组合框</h2>

<p><code>ht.widget.ComboBox</code>为组合框类，其主要可配置属性和函数如下：</p>

<ul><li><code>value</code>属性通过<code>getValue</code>和<code>setValue</code>获取和设置当前值，可为任意类型</li><li><code>values</code>属性通过<code>getValues</code>和<code>setValues</code>获取和设置下拉可选值，为<code>Array</code>类型数组，其值类型需与<code>value</code>一致</li><li><code>labels</code>属性通过<code>getLabels</code>和<code>setLabels</code>获取和设置下拉可选值对应文本，为<code>Array</code>类型数组，数组长度需与<code>values</code>一致</li><li><code>icons</code>属性通过<code>getIcons</code>和<code>setIcons</code>获取和设置下拉可选值对应图标，为<code>Array</code>类型数组，数组长度需与<code>values</code>一致</li><li><code>background</code>属性通过<code>getBackground</code>和<code>setBackground</code>获取和设置背景色，字符串类型</li><li><code>selectBackground</code>属性通过<code>getSelectBackground</code>和<code>setSelectBackground</code>获取和设置选中背景色，字符串类型</li><li><code>indent</code>属性通过<code>getIndent</code>和<code>setIndent</code>获取和设置图标缩进，为数字类型</li><li><code>editable</code>属性通过<code>isEditable</code>和<code>setEditable</code>获取和设置组合框是否允许输入编辑，为<code>boolean</code>类型，默认为<code>false</code></li><li><code>selectIcon</code>属性通过<code>getSelectIcon</code>和<code>setSelectIcon</code>获取和设置下拉勾选图标</li><li><code>dropDownIcon</code>属性通过<code>getDropDownIcon</code>和<code>setDropDownIcon</code>获取和设置下拉箭头图标</li><li><code>dropDownWidth</code>属性通过<code>getDropDownWidth</code>和<code>setDropDownWidth</code>获取和设置下拉列表宽，默认为组合框宽度</li><li><code>disabled</code>属性通过<code>isDisabled</code>和<code>setDisabled</code>获取和设置是否使能功能，默认值为<code>false</code></li><li><code>toolTip</code>属性通过<code>getToolTip</code>和<code>setToolTip</code>获取和设置文字提示，可通过<code>enableToolTip()</code>和<code>disableToolTip()</code>启动和关闭文字提示</li></ul>

<p><iframe src="examples/example_combobox.html" style="height:360px"></iframe></p>

<div id="ref_multicombobox"></div>

<h2>模板组合框</h2>

<p><code>ht.widget.MultiComboBox</code>为模板组合框类，其主要可配置属性和函数如下：</p>

<ul><li><code>value</code>属性通过<code>getValue</code>和<code>setValue</code>获取和设置当前值</li><li><code>background</code>属性通过<code>getBackground</code>和<code>setBackground</code>获取和设置背景色，字符串类型</li><li><code>indent</code>属性通过<code>getIndent</code>和<code>setIndent</code>获取和设置图标缩进，为数字类型</li><li><code>editable</code>属性通过<code>isEditable</code>和<code>setEditable</code>获取和设置组合框是否允许输入编辑，为<code>boolean</code>类型，默认为<code>false</code></li><li><code>dropDownIcon</code>属性通过<code>getDropDownIcon</code>和<code>setDropDownIcon</code>获取和设置下拉箭头图标</li><li><code>dropDownWidth</code>属性通过<code>getDropDownWidth</code>和<code>setDropDownWidth</code>获取和设置下拉框宽，默认为组合框宽度</li><li><code>disabled</code>属性通过<code>isDisabled</code>和<code>setDisabled</code>获取和设置是否使能功能，默认值为<code>false</code></li><li><code>toolTip</code>属性通过<code>getToolTip</code>和<code>setToolTip</code>获取和设置文字提示，可通过<code>enableToolTip()</code>和<code>disableToolTip()</code>启动和关闭文字提示</li><li><code>dropDownComponent</code>属性通过<code>setDropDownComponent</code>和<code>getDropDownComponent</code>设置下拉框模版类，此类要从<code>ht.widget.BaseDropDownTemplate</code>继承</li><li><code>open()</code>打开下拉框</li><li><code>close()</code>关闭下拉框</li></ul>

<p>模板组合框和普通组合框类似，不过它下拉的内容是开发人员自定义的，因此下拉框中可以放入任意组件(<code>HT</code>的组件或普通的<code>DOM</code>元素)，要自定义下拉框的内容，需要自定义一个类继承<code>ht.widget.BaseDropDownTemplate</code>，并重载几个方法：</p>

<ul><li><code>getView()</code> 重载此方法返回要显示在下拉框中的<code>DOM</code>对象</li><li><code>onOpened(value)</code> 此方法在下拉框弹开时被回调，重载此方法将<code>value</code>参数显示在下拉框中</li><li><code>onClosed()</code> 下拉框关闭时被回调，可以重载此方法做一些清理工作</li><li><code>getValue()</code> 下拉框关闭时被回调，重载此方法返回下拉框的值</li><li><code>getWidth()</code> 重载此方法返回下拉框的宽度，如果没有重载此方法，下拉框的宽度和<code>MultiComboBox</code>的宽度保持一致</li><li><code>getHeight()</code> 重载此方法返回下拉框的高度</li></ul>

<p><iframe src="examples/example_multicombobox.html" style="height:250px"></iframe></p>

<div id="ref_colorpicker"></div>

<h2>颜色选择框</h2>

<p><code>ht.widget.ColorPicker</code>为颜色选择框，从<code>MultiComboBox</code>继承，除了从<code>MultiComboBox</code>继承的属性和函数，此类还增加两个属性:</p>

<ul><li><code>instant</code>属性通过<code>isInstant</code>和<code>setInstant</code>获取和设置是否处于即时状态，默认为<code>true</code>，代表作为表格和属性页的编辑器时，将实时改变模型值</li><li><code>clearButtonVisible</code> 通过<code>isClearButtonVisible</code>和<code>setClearButtonVisible</code>获取和设置清除按钮是否可见，默认为<code>true</code></li></ul>

<p><iframe src="examples/example_colorpicker.html" style="height:400px"></iframe></p>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
